<template>
  <div class="api-demo">
    <div class="container">
      <div class="card">
        <h1>🌐 API 请求示例</h1>
        <p class="description">演示如何使用 Axios 进行 HTTP 请求</p>

        <div class="demo-section">
          <h2>测试 API 请求</h2>
          <div class="button-group">
            <button class="button" @click="fetchData">发送 GET 请求</button>
            <button class="button secondary" @click="fetchData" :disabled="loading">
              {{ loading ? '请求中...' : '重新请求' }}
            </button>
          </div>

          <div v-if="loading" class="loading">
            <p>⏳ 正在加载数据...</p>
          </div>

          <div v-if="error" class="error">
            <p>❌ 错误: {{ error }}</p>
          </div>

          <div v-if="data && !loading" class="result">
            <h3>请求结果：</h3>
            <pre>{{ JSON.stringify(data, null, 2) }}</pre>
          </div>
        </div>

        <div class="demo-section">
          <h2>代码示例</h2>
          <div class="code-block">
            <code>import api from '@/utils/api'</code><br>
            <code></code><br>
            <code>// GET 请求</code><br>
            <code>const { data } = await api.get('/users')</code><br>
            <code></code><br>
            <code>// POST 请求</code><br>
            <code>const { data } = await api.post('/users', { name: 'John' })</code>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import api from '@/request'

const loading = ref(false)
const data = ref<any>(null)
const error = ref<string>('')

const fetchData = async () => {
  loading.value = true
  error.value = ''
  data.value = null

  try {
    // 使用 JSONPlaceholder 作为示例 API
    const response = await api.get('https://jsonplaceholder.typicode.com/posts/1')
    data.value = response.data
  } catch (err: any) {
    error.value = err.message || '请求失败'
    console.error('API Error:', err)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.api-demo {
  padding: 2rem 0;
  min-height: calc(100vh - 100px);
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.description {
  text-align: center;
  color: #666;
  margin-bottom: 2rem;
}

.demo-section {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}

h2 {
  color: #667eea;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.button-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.loading,
.error,
.result {
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
}

.loading {
  background: #fff3cd;
  border: 1px solid #ffc107;
}

.error {
  background: #f8d7da;
  border: 1px solid #dc3545;
  color: #721c24;
}

.result {
  background: white;
  border: 1px solid #28a745;
}

.result h3 {
  margin-bottom: 0.5rem;
  color: #28a745;
}

pre {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

.code-block {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 1.5rem;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  overflow-x: auto;
}
</style>

